<div [@routerTransition]>
    <h3>{{l("SignUp")}}</h3>

    <form nz-form #registerForm="ngForm" method="post" novalidate (ngSubmit)="save()">
        <nz-form-item>
            <nz-form-control>
                <input nz-input #nameInput="ngModel" autoFocus type="text"
                       placeholder="{{l('Name')}} *" [(ngModel)]="model.name" name="Name" required maxlength="32"/>
                <validation-messages [formCtrl]="nameInput"></validation-messages>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control>
                <input nz-input #surnameInput="ngModel" type="text" placeholder="{{l('Surname')}} *"
                       [(ngModel)]="model.surname" name="Surname" required maxlength="32"/>
                <validation-messages [formCtrl]="surnameInput"></validation-messages>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control>
                <input nz-input #emailAddressInput="ngModel"  type="email"
                       placeholder="{{l('EmailAddress')}} *" [(ngModel)]="model.emailAddress" name="EmailAddress"
                       required maxlength="256" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$"/>
                <validation-messages [formCtrl]="emailAddressInput"></validation-messages>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control>
                <input nz-input #userNameInput="ngModel"  type="text" autocomplete="off"
                       placeholder="{{l('UserName')}} *" name="UserName" [(ngModel)]="model.userName" required
                       maxlength="32"/>
                <validation-messages [formCtrl]="userNameInput"></validation-messages>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control>
                <input nz-input type="password" name="Password"  [(ngModel)]="model.password"
                       #Password="ngModel" placeholder="{{l('Password')}}" validateEqual="PasswordRepeat"
                       reverse="true" [requireDigit]="passwordComplexitySetting.requireDigit"
                       [requireLowercase]="passwordComplexitySetting.requireLowercase"
                       [requireUppercase]="passwordComplexitySetting.requireUppercase"
                       [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                       [requiredLength]="passwordComplexitySetting.requiredLength"
                       required>
            </nz-form-control>
            <div [hidden]="registerForm.form.valid || registerForm.form.pristine" class="form-group m-form__group">
                <ul class="help-block text-error" *ngIf="Password.errors">
                    <li [hidden]="!Password.errors.requireDigit">{{l("PasswordComplexity_RequireDigit_Hint")}}</li>
                    <li [hidden]="!Password.errors.requireLowercase">{{l("PasswordComplexity_RequireLowercase_Hint")}}
                    </li>
                    <li [hidden]="!Password.errors.requireUppercase">{{l("PasswordComplexity_RequireUppercase_Hint")}}
                    </li>
                    <li [hidden]="!Password.errors.requireNonAlphanumeric">
                        {{l("PasswordComplexity_RequireNonAlphanumeric_Hint")}}
                    </li>
                    <li [hidden]="!Password.errors.requiredLength">{{l("PasswordComplexity_RequiredLength_Hint",
                        passwordComplexitySetting.requiredLength)}}
                    </li>
                </ul>
            </div>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control>
                <input nz-input type="password" name="PasswordRepeat"  [ngModel]="model.passwordRepeat"
                       #PasswordRepeat="ngModel" placeholder="{{l('PasswordRepeat')}}" validateEqual="Password"
                       reverse="false" [requireDigit]="passwordComplexitySetting.requireDigit"
                       [requireLowercase]="passwordComplexitySetting.requireLowercase"
                       [requireUppercase]="passwordComplexitySetting.requireUppercase"
                       [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                       [requiredLength]="passwordComplexitySetting.requiredLength"
                       required>
            </nz-form-control>
            <div [hidden]="registerForm.form.valid || registerForm.form.pristine" class="form-group m-form__group">
                <ul class="help-block text-error" *ngIf="PasswordRepeat.errors">
                    <li [hidden]="!PasswordRepeat.errors.requireDigit">{{l("PasswordComplexity_RequireDigit_Hint")}}
                    </li>
                    <li [hidden]="!PasswordRepeat.errors.requireLowercase">
                        {{l("PasswordComplexity_RequireLowercase_Hint")}}
                    </li>
                    <li [hidden]="!PasswordRepeat.errors.requireUppercase">
                        {{l("PasswordComplexity_RequireUppercase_Hint")}}
                    </li>
                    <li [hidden]="!PasswordRepeat.errors.requireNonAlphanumeric">
                        {{l("PasswordComplexity_RequireNonAlphanumeric_Hint")}}
                    </li>
                    <li [hidden]="!PasswordRepeat.errors.requiredLength">{{l("PasswordComplexity_RequiredLength_Hint",
                        passwordComplexitySetting.requiredLength)}}
                    </li>
                    <li [hidden]="PasswordRepeat.valid">{{l("PasswordsDontMatch")}}</li>
                </ul>
            </div>
        </nz-form-item>

        <nz-form-item>
            <button nz-button [disabled]="saving" routerLink="/account/login" type="button" class="login">
                <i class="anticon anticon-arrow-left"></i>
                {{l("Back")}}
            </button>
            <button nz-button type="submit" [nzType]="'primary'"
                    [disabled]="!registerForm.form.valid" [nzLoading]="saving" class="submit">
                <i class="anticon anticon-check"></i> {{l("Submit")}}
            </button>
        </nz-form-item>
    </form>
</div>
